import React,{Component} from 'react';
import fetch from 'isomorphic-fetch';
import './../../css/reset.css';
import './tab.css';
import Card2 from './../../components/card/card2';
import $ from 'jquery';
class Clumn extends Component{
  constructor(props){
    super(props);
    this.state={};
    this.handleTabMethod=this.handleTabMethod.bind(this);
  }
  getUrlParam(name){
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    let hrefSeach='';
    if(window.location.href.indexOf('?')>0){
      hrefSeach = window.location.href.split('?')[1];
    }else{
      return;
    }
    let rl = hrefSeach.match(reg);
    if (rl != null) return decodeURI(rl[2]); return null;
  }
  handleTabMethod(e){
    $(e.target).addClass('tab_on').siblings('li').removeClass('tab_on');
  }
  componentDidMount(){
    fetch('this.props.url')
      .then(response=>response.json())
      .then(json=>{
        this.setState(json);
      })
      .catch((error) => {  
        console.error(error);  
      });  
  }
  render(){
  	return(
  		<div className='tab_view'>
  		  <ul className='tab'>
          <li onClick={this.handleTabMethod} className='tab_li tab_on'>{'全部'}</li>
          <li onClick={this.handleTabMethod} className='tab_li'>{'小吃快餐'}</li>
          <li onClick={this.handleTabMethod} className='tab_li'>{'蛋糕甜点'}</li>
          <li onClick={this.handleTabMethod} className='tab_li'>{'生活服务'}</li>
        </ul>
        <ul className='tab_handle'>
          <Card2 />
          <Card2 />
          <Card2 />
          <Card2 />
          <Card2 />
        </ul>
  		</div>
  		)
  }
}
export default Clumn;